<template>
  <div style="height: 100%">
    <!--搜索框-->

    <el-form :inline="true">
      <el-row type="flex"  justify="space-between">
          <el-form-item>
            <el-button icon="el-icon-circle-plus-outline" type="primary" @click="showAdd"
                       v-if="hasAuth('sys:user:save')">新增</el-button>
            <el-button icon="el-icon-delete" type="danger" @click="prompt(()=>delHandle(null))"
                       v-if="hasAuth('sys:user:delete')"  :disabled="delBtnStu">批量删除</el-button>
          </el-form-item>
      </el-row>
    </el-form>
    <!--
      属性：
        selectable: 是否展示选择框
        table-attr： 表格属性
        table-data: 表格数据
        page: 分页配置
        show-view: 是否在操作列显示默认的view按钮
        show-edit： 是否在操作列显示默认的edit按钮
        show-delete： 是否在操作列显示默认的delete按钮
      方法：
        viewClick: 点击编辑按钮的回调
        editClick: 点击编辑查看的回调
        deleteClick: 点击删除按钮的回调
        handleSearch: 点击查询按钮的回调
        pagerChange: 分页的当前页面和每页显示条数改变时的回调
      插槽:
        handle插槽: 可自定义操作列的按钮
    -->
    <cxs-table
        :selectable=true
        :table-attr="tableAttr"
        :table-data="tableData"
        :page="pageOption"
        :show-view="false"
        :show-edit="hasAuth('sys:user:update')"
        :show-delete="hasAuth('sys:user:delete')"
        @editClick="showEdit"
        @deleteClick="row => confirm(() => delHandle(row.id))"
        @handleSearch="searchHandle"
        @selectionChange="handleSelectionChange"
        @pagerChange="pagerChange"
        >
      <template v-slot:handle="scope">
        <el-button size="small" type="text" @click="roleHandle(scope.row.id)" v-if="hasAuth('sys:user:role')">分配角色</el-button>
        <el-divider direction="vertical"></el-divider>
        <el-button size="small" type="text" @click="repassHandle(scope.row.id, scope.row.username)"
                   v-if="hasAuth('sys:user:repass')">重置密码</el-button>
      </template>
    </cxs-table>

    <!-- 编辑对话框   -->
    <cxs-form
        :title="formTitle"
        :show.sync="dialogFormVisible"
        :form-attr="formAttr"
        :data="editForm"
        @onSubmit="submitHandle"
    ></cxs-form>


    <!-- 分配权限对话框 -->
    <el-dialog title="分配角色" :visible.sync="roleDialogFormVisible" width="600px">
      <el-form :model="roleForm" ref="roleForm">
        <el-tree
            v-loading="roleTreeloading"
            :data="roleTreeData"
            show-checkbox
            ref="roleTree"
            node-key="id"
            :default-expand-all=true
            :props="defaultProps">
        </el-tree>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="roleDialogFormVisible=false">取 消</el-button>
        <el-button type="primary" @click="submitRoleForm('roleForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>

import data from "./data";
import methods from "./methods";
import AdvancedSearch from "@/components/AdvancedSearch";

export default {
  name: "UserIndex",
  components: {
    AdvancedSearch
  },
  data() {
    return data;
  },
  methods: methods,
  created() {
    this.getUserList();
    // 提前加载角色列表，给用户分配角色时使用
    this.getRoleList();
  }
}
</script>

<style scoped>
@import './style.css';  /* 这个分号一定要写，要不会报 */
</style>